<template>
	<view>
		<!-- <image src="/static/sjimg/bgck.png" mode="widthFix" class="back" @click="back"></image> -->
		<swiper class="swiper" circular indicator-dots indicator-active-color="#fff">
			<swiper-item class="swipeit" v-for="(item,index) in images" :key="index">
				<image :src="imgUrl+item" mode="scaleToFill" class="img" />
			</swiper-item>
		</swiper>
		<view class="probx">
			<view class="txttils"> {{details.pro_name}} </view>
			<view class="ioda">
				<text class="text-prices">{{Number(details.sale_price).toFixed(2)}}</text>
				<text class="txtku">已售：{{details.count_sales?details.count_sales:'0'}}</text>
			</view>
		</view>
		<view class="projie">
			<uvarse :content="details.memo" :preview-img="false"></uvarse>
		</view>
		<view style="width: 100%;height: 50rpx;"></view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff" :is-mask-click="false">
			<view class="pobox">
				<view class="pob">
					<view class="pob1">
						<image :src="imgUrl+details.pro_pic" mode="scaleToFill" class="imsa"></image>
					</view>
					<view class="pob2">
						<view class="uisu">
							<text class="txtjia">价格：￥{{Number(money).toFixed(2)}}</text>
							<text class="xuns">已选择：{{contents}}</text>
						</view>
						<uni-icons type="close" size="30" @click="close"></uni-icons>
					</view>
				</view>
				<view class="guisu">规格</view>
				<view class="iusa" v-for="item in guiList" :key="item.id" @click="xuanZe(item)" :class="item.id == indexid?'bg-iu':'line-iu'">
					<view> {{item.name}} </view>
					<view>￥{{Number(item.price_sall).toFixed(2)}}</view>
				</view>
				<button class="yisa" @click="buyOne(indexid)">立即购买</button>
			</view>
		</uni-popup>
		<view class="tvbox">
			<view class="buycss" @click="buttonClick"> 下单购买 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { apiProdetail , apiGuige } from '@/api/upapi.js';
	import uvarse from '@/uni_modules/uv-parse/components/uv-parse/uv-parse';
	
	const idx = ref('');
	const indexid = ref('');
	const guiname=ref('')
	const money = ref('');
	const contents = ref('');
	const popup = ref(null);
	const images = ref([]);
	const details = ref({});
	const guiList = ref([]);
	const imgUrl = ref('https://m.aqbwg.cn/sourse/xiaowan/product/');
	
	const getShop = async() => {
		try {
			let res = await apiProdetail({ id: idx.value });
			const data = res.data.object;
			images.value = [ data.pro_pic ];
			details.value=data;
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const back = () => { uni.navigateBack({ delta: 1 }) };
	const buttonClick = () => { guigeData(); };
	const close = () => { popup.value.close() };
	const guigeData = async () => {
		try {
			let res = await apiGuige({ proid: idx.value });
			var data = res.data.object;
			if(data.length>0){
				popup.value.open();
				guiList.value = data;
			}else{
				uni.navigateTo({ url: '/pagesA/business/buy?pid='+idx.value+'&guiname='+details.value.pro_name+'&money=' +details.value.sale_price });
				close();
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const xuanZe = (e) => {
		indexid.value = e.id;
		contents.value = e.name + '--￥' + e.price_sall;
		money.value = e.price_sall;
		guiname.value = e.name;
	};
	const buyOne = (e) => {
		if (e == '') {
			uni.showToast({ title: '请选择规格', icon: 'none' }); return;
		} else {
			uni.navigateTo({ url: '/pagesA/business/buy?pid='+idx.value+'&skuId='+indexid.value+'&guiname='+guiname.value+'&money=' +money.value });
			close();
		}
	};
	
	onLoad((option) => {
		idx.value=option.id;
		getShop();
	});
</script>

<style lang="scss" scoped>
	.back{
		position: fixed;
		left: 30rpx;
		width: 80rpx;
		top: 80rpx;
		z-index: 8;
		background: #ffffffbd;
		border-radius: 50rpx;
	}
	.goods-carts {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 6;
	}
	.yulisa{
		display: flex;
		margin-bottom: 20rpx;
	}
	.uixtxt{
		padding: 10rpx 20rpx;
		color: #fff;
		background-color: #ff4a82;
		font-size: 24rpx;
		font-weight: bolder;
		margin-right: 15rpx;
		border-radius: 10rpx;
	}
	.pobox {
		padding: 30rpx;
	
		.pob {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
	
			.pob1 {
				width: 150rpx;
				height: 150rpx;
				background-color: #fff;
				margin-top: -80rpx;
				border-radius: 30rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				.imsa {
					width: 140rpx;
					height: 140rpx;
					border-radius: 30rpx;
				}
			}
			.pob2 {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 20rpx;
				.uisu {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 420rpx;
					white-space: nowrap;
					overflow: hidden;
					
					.txtjia {
						color: #ff4a82;
						font-size: 26rpx;
						font-weight: bolder;
					}
					.xuns{
						font-size: 22rpx;
						text-overflow: ellipsis;
					}
				}
			}
		}
	
		.guisu {
			font-size: 26rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: #8c8c8c;
			text-align: left;
		}
		// .guisu::before{
		// 	content: "";
		// 	display: inline-block;
		// 	width: 8rpx;
		// 	height: 0.7rem;
		// 	background-color: #8c8c8c;
		// 	margin-right: 10rpx;
		// 	border-radius: 20rpx;
		// }
	
		.iusa {
			background-color: #f3f3f5;
			border-radius: 8rpx;
			padding: 0 10rpx 0 0;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			justify-content: space-between;
		}
	
		.bg-iu {
			background-color: #fef5f6 !important;
			color: #ff4a82;
			border: 2rpx solid #ff4a82;
			padding: 15rpx;
		}
	
		.line-iu {
			padding: 15rpx;
		}
	
		.yisa {
			background: linear-gradient(90deg, #ff9db3, #ff4a82);
			color: #fff;
			width: 100%;
			border-radius: 50rpx;
			margin-top: 60rpx;
		}
	}
	
	.swiper {
		height: 700rpx;
	
		.swipeit {
			display: block;
			height: 700rpx;
			overflow: hidden;
			line-height: 700rpx;
		}
	
		.img {
			width: 100%;
			height: 700rpx;
		}
	}
	
	.probx {
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	
		.txttils {
			font-weight: bolder;
			text-align: justify;
			font-size: 34rpx;
		}
	
		.ioda {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
	
			.text-prices {
				font-weight: bolder;
				color: #ff0000;
				font-size: 40rpx;
			}
	
			.text-prices::before {
				content: '￥';
				color: #ff0000;
				font-size: 26rpx !important;
				margin-right: 6rpx;
			}
	
			.txtku {
				color: #949494;
				font-size: 26rpx;
			}
		}
	}
	
	.projie {
		padding: 0 30rpx;
		background-color: #fff;
	}
	.tvbox{
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx 0;
		width: 100%;
		.buycss{
			background: linear-gradient(207deg,#ff9db3 0%, #ff4a82 100%);
			padding:30rpx;
			margin: 0 30rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			text-align: center;
			font-weight: bolder;
			color: #fff;
		}
	}
	
</style>
